<template>
  <div id="space-settings">
    <div class="main-container container-limited container-fluid page-holder">
      <breadcrumb/>
      <el-collapse v-model="activeItem" accordion class="space-settings header-no-focusing-color">
        <el-collapse-item v-if="isSpaceOwner" :name="settings.general" :ref="settings.general">
          <div slot="title">
            <p class="collapse-title">常规设置</p>
            <p>修改空间名、空间描述、空间封面和其它常规设置。</p>
          </div>
          <General :active-item.sync="activeItem"></General>
        </el-collapse-item>
        <el-collapse-item :name="settings.invitation" :ref="settings.invitation">
          <div slot="title">
            <p class="collapse-title">成员管理</p>
            <p>空间邀请链接，空间成员管理。</p>
          </div>
          <members />
        </el-collapse-item>
        <el-collapse-item
          v-if="isSpaceOwner"
          :name="settings.communities"
          :ref="settings.communities"
        >
          <div slot="title">
            <p class="collapse-title">社区关联设置</p>
            <p>处理社区邀请，退出社区。</p>
          </div>
          <Communities :active="activeItem === settings.communities"/>
        </el-collapse-item>
        <el-collapse-item v-if="isSpaceOwner" :name="settings.advanced" :ref="settings.advanced">
          <div slot="title">
            <p class="collapse-title">高级设置</p>
            <p>修改空间访问级别、移交空间、设置贡献自动接受。</p>
          </div>
          <advanced :active-item.sync="activeItem" />
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import General from './General';
import Members from './members';
import Communities from './communities';
import Advanced from './advanced/index';

export default {
  name: 'SpaceSettings', // 空间设置
  components: { General, Members, Communities, Advanced },
  data() {
    return {
      activeItem: this.$route.query.active || '', // 当前激活的菜单（也可以用来设置默认激活的菜单）
      settings: this.$C.spaces.settings,
    };
  },
  computed: {
    ...mapGetters(['isSpaceOwner']),
  },
  mounted() {
    if (this.activeItem) {
      this.$refs[this.activeItem].$el.scrollIntoView({ block: 'center' });
    }
  },
};
</script>

<style></style>
